<template>
  <div class="yxp-scene-pop" v-if="isPoint">
    <div class="close-wrap">
      <div class="close" id="yxp-commp-back6" @click="handleClose"></div>
    </div>
    <div class="yxp-scene-pop-content">
      <div class="content-wrap">
        <h3 class="title">
          <img src="@/assets/composition/point-icon.png" />要点解读
        </h3>
        <div class="content">
          <p class="detail" v-html="content"></p>
        </div>
      </div>
    </div>
    <div class="btn">
      <div class="btn-item" id="yxp-commp-back7" @click="handleClose">知道了</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'readPop',
  props: {
    isPoint: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    }
    
  },
  data () {
    return {}
  },
  methods: {
    handleClose () {
      this.$emit('point', false)
    }
  }
}
</script>
<style lang='less' scoped>
/**弹窗 */
  .yxp-scene-pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: calc(100% - 200px);
    background: #fff;
    border-radius: 10px;
    z-index: 2000;
    &-content {
      position: relative;
      height: calc(100% - 100px);
      overflow: hidden;
      padding-left: 75px;
      padding-right: 50px;
      .content-wrap {
        height: 100%;
        text-align: center;
        overflow: auto;
       
      }
    }
    .close-wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 50px;
      background: #fff;
      border-radius: 10px 10px 0 0;
      z-index: 2001;
    }
    .close {
      position: absolute;
      right: 20px;
      top:20px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333;
      margin-top: 50px;
      img {
        display: inline-block;
        vertical-align: middle;
        width: 32px;
        height: 29px;
        margin-right: 6px;
      }
    }
    .content {
      text-align: left;
      margin-top: 30px;
      .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333;
      }
      .detail {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333;
        margin-top: 30px;
      }
    }
    .btn {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100px;
      background: #fff;
      border-radius: 0 0 10px 10px;
      z-index: 2001;
      &-item {
        width: 280px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        margin: 20px auto 30px;
        cursor: pointer;
        &:hover {
          background: #18A38A;
        }
      }
    }
  }
</style>
